<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name:{{name}}</div>
    <div class="dashboard-text">roles:<span v-for='role in roles' :key='role'>{{role}}</span></div>
    <!-- <Chart id="test" :option="option" height='200px' width='100%'/> -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Chart from "@/components/Charts";

export default {
  name: 'home',
  data() {
    return {
      option: {},
      mockData: {
        title: { text: "Echarts" },
        legend: {
          data: ["销量"]
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
          name: "销量",
          type: "line",
          data: [5, 20, 36, 10, 10, 70]
        }]
      },
      chartData: {
        xData: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        sData: [5, 20, 36, 10, 10, 70]
      }
    }
  },
  components: { Chart },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.option = this.mockData;
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 28px;
    line-height: 46px;
    span {
      margin-right: 15px;
    }
  }
}
</style>
